---
title: Installare un plugin Vite o Rollup
description: Impara come importare dati YAML aggiungendo un plugin Rollup al tuo progetto.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro è basato su Vite, e supporta sia i plugin Vite che Rollup. Questa ricetta utilizza un plugin Rollup per aggiungere la possibilità di importare un file YAML (`.yml`) in Astro.

## Ricetta

1. Installa `@rollup/plugin-yaml`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Importa il plugin nel tuo `astro.config.mjs` e aggiungilo all'array dei plugin Vite:

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```


3. A questo punto, puoi importare i dati YAML utilizzando l'istruzione `import`:

    ```js
    import yml from './data.yml';
    ```

    :::note
    Mentre puoi importare dati YAML nel tuo progetto Astro, il tuo editor non fornirà tipi per i dati importati. Per aggiungere i tipi, crea o trova un file `*.d.ts` esistente nella directory `src` del tuo progetto e aggiungi quanto segue:
    ```ts title="src/files.d.ts"
    // Specifica l'estensione del file che vuoi importare
    declare module "*.yml" {
      const value: any; // Aggiungi le definizioni dei types qui se desideri
      export default value;
    }
    ```
    Questo permetterà al tuo editor di fornire suggerimenti sui types per i tuoi dati YAML.
    :::
